<template>
	<div>
		<a-table :columns="columns" :data-source="data" bordered :loading="loading" :pagination="pagination"
			class="maincon" :row-selection="rowSelection">
		</a-table>
		<div class="btn">
			<a-button type="primary" style="margin-right: 20px" @click="btn">保存 </a-button>
			<a-button type="primary" @click="remove"> 取消 </a-button>
		</div>
		<a-modal width="20%" title="新增款式要求" :visible="visible" @ok="btnOK" @cancel="handleCancel">
			<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
				<a-form-model-item label="销售色">
					<a-input v-model="form.name" />
				</a-form-model-item>
			</a-form-model>
		</a-modal>
	</div>
</template>
<script>
	import {
		getNewStyleSizeList
	} from '@api/spection/index'

	export default {
		name: 'salesColor',
		data() {
			return {
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 14
				},
				data: [{
						title: '选择',
						dataIndex: 'age',
						key: '序号',
					},
					{
						title: '尺码编号',
						dataIndex: 'age',
						key: 'age'
					},
					{
						title: '尺码名称',
						dataIndex: 'address',
						key: 'address'
					},
				],
				columns: [],
				loading: false,
				pagination: false,
				visible: false,
				form: {
					name: '',
					region: undefined,
					date1: undefined,
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				}
			}
		},
		computed: {
			rowSelection() {
				return {
					onChange: (selectedRowKeys, selectedRows) => {
						console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
					}
				}
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			async getList() {
				const data = {
					billNo:this.$route.query.billNo
				}
				const res = await getNewStyleSizeList(this.$route.query.billNo)
				if (res.code == 200) {
					this.data = res.data
				} else {
					if (res.msg) {
						this.$message.error(res.msg)
					} else {
						this.$message.error('获取待办列表失败！')
					}
				}
			},
			async editRole(id) {
				//   this.roleForm = await getRoleDetail(id)
				this.visible = true // 为了不出现闪烁的问题 先获取数据 再弹出层
			},
			// 确定接口
			async btnOK() {
				try {
					// await this.$refs.roleForm.validate(valid => {
					//     if(valid){
					//   // 只有校验通过的情况下 才会执行await的下方内容
					//   // roleForm这个对象有id就是编辑 没有id就是新增
					//   if (this.roleForm.id) {
					//     return updateRole(this.roleForm)
					//   } else {
					//     // 新增业务
					//     //   return addRole(this.roleForm)
					//   }
					// }
					// })

					// 重新拉取数据
					// this.getRoleList()
					// this.$message.success('操作成功')
					this.visible = false
				} catch (error) {
					console.log(error)
				}
			}, // 取消
			handleCancel(e) {
				console.log(e)
				// this.$refs.ruleForm.resetFields();
				this.visible = false
			},
			// 删除接口
			async deleteRole(id) {
				//  提示
				try {
					await this.$confirm({
						title: ' 确认删除吗？'
					})
					// 只有点击了确定 才能进入到下方
					// await deleteRole(id) // 调用删除接口
					// this.getRoleList() // 重新加载数据
					this.$message.success('删除角色成功')
				} catch (error) {
					console.log(error)
				}
			},
			// 保存
			btn() {
				this.$router.push('/spection/Designlist/sizingInformation/index')
			},
			remove() {
				this.$router.push('/spection/Designlist/sizingInformation/index')
			}
		}
	}
</script>
<<style scoped lang=less>
	/deep/ .ant-table-thead > tr > th {
	text-align: center;
	}
	/deep/ .ant-table table {
	text-align: center;
	}
	.btn{
	margin: 20px 0 0 50%;
	}
	.maincon{
	margin: 60px;
	}
	</style>